<template>
	<view class="bg pd30" v-cloak>
		<u-navbar title="声音文案" bgColor="transparent" autoBack placeholder></u-navbar>

		<view class="bg-w bdr16" style="box-shadow: 1px 2px 10px rgba(20, 111, 255, 0.09);">
			<!-- <audioSynthesis ref="synthesis" v-if="current == 0" :catData="catData">
			</audioSynthesis>
			<test v-if="current == 1"></test> -->
			<view class="pd30 pb60">
				<view class="df">
					<view class="title">
						文字合成
					</view>
					<view class="closeBox" @click="show=true">
						<image src="@/static/img/openLive/audio.png" style="width: 22rpx;height: 24rpx;" mode=""></image>
						上传
					</view>
				</view>

				<uni-data-select class="mt30" v-model="formData.cat" placeholder="请选择音色分类" :localdata="catData"
					@change="catChange" clear></uni-data-select>
				<uni-data-select class="mt30" v-model="formData.timbre" placeholder="请选择音色" :localdata="timbreData"
					@change="timbreChange"></uni-data-select>

				<!-- <uni-combox :candidates="candidates" class="mt30" placeholder="请选择音色"  v-model="timbre"></uni-combox>
				<uni-combox :candidates="candidates" class="mt30" placeholder="请选择音色"  v-model="timbre"></uni-combox> -->

				<view class="df alc mt20" style="color: #555;">
					语速：
					<view style="width: 72vw;">
						<u-slider v-model="formData.speech_rate" min="-5" max="5" showValue></u-slider>
					</view>
				</view>

				<view class="df alc" style="color: #555;">
					语调：
					<view style="width: 72vw;">
						<u-slider v-model="formData.pitch_rate" min="-5" max="5" showValue></u-slider>
					</view>
				</view>
				<u--textarea v-model="formData.text" placeholder="请输入文案话术" height="120" maxlength="300" count></u--textarea>

			</view>
		</view>

		<view class="btnBox">
			<view class="btn btn1" @click="generate">
				点击生成
			</view>
			<view class="btn btn2" @click="submit">
				提交音频
			</view>
		</view>

		<u-popup :show="show" :round="10" closeable mode="center" @close="show=false">
			<view>
				<test></test>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				showSize: false,
				current: 0,
				title: '',
				audio_name: '',
				group_id: '',
				voiceList: [],
				catData: [],
				timbreData: [],
				value1: '',
				value: 0,
				candidates: [],
				formData: {
					text: '',
					catId: '',
					timbreId: '',
					speech_rate: 0,
					pitch_rate: 0
				},
				timbre: '',
				current: {
					poster: '',
					name: '暂未生成音频',
					author: '',
					src: '',
				},
				audioAction: {
					method: 'pause'
				}
			};
		},
		onLoad() {
			this.initData()
		},
		methods: {
			initData() {
				// this.$api.get_cat().then(res => {
				// 	this.catData = res.data
				// })
				this.$api.get_cat().then(res => {
					console.log(res);
					this.catData = []
					res.data.map(i => {
						let obj = {
							value: i.id,
							text: i.cat_name
						}
						this.catData.push(obj)
					})
				})
			},
			change(index) {
				this.current = index;
			},
			catChange(e) {
				this.$api.get_timbre_list({
					cat_id: e
				}).then(res => {
					this.timbreData = []
					res.data.map(i => {
						let obj = {
							vlaue: i.id,
							text: i.name
						}
						this.timbreData.push(obj)
					})
				})
			},
			timbreChange(e) {
				this.formData.timbreId = e;
			},
			create() {
				this.$refs.uForm.validate().then(res => {
					// uni.$u.toast('校验通过')
					let data = {
						image_id: this.model1.userInfo.styleId,
						cat_id: this.model1.userInfo.describe,
						type_s: 2
					}

				}).catch(errors => {
					console.log(errors);
					uni.$u.toast('校验失败')
				})
			},
			generate() {
				if (!this.formData.text) {
					this.$tools.toast('请输入文案话术生成音频！');
					return
				}
				if (!this.formData.timbreId) {
					this.$tools.toast('请选择音色后提交！');
					return
				}
				let voice;
				this.voiceList.map(r => {
					if (r.name == this.timbre) {
						voice = r.id
					}
				})
				this.$emit('generate', {
					cat_text: this.value1,
					speech_rate: this.value * 100,
					voice
				})
			},
			submit() {
				console.log(this.current);
				if (this.current.src) {
					this.$emit('submit', this.current.src)
				} else {
					this.$tools.toast('请生成音频后提交！');
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	::v-deep {
		.uni-slider-handle-wrapper {
			height: 12rpx !important;
		}

		uni-slider .uni-slider-value {
			width: 0;
		}


		.uni-select {
			background: #f7fafc !important;
			padding: 14rpx 24rpx !important;
			border: 0;
		}

		.u-textarea,
		.u-textarea__count,
		.uni-audio-default {
			background: #f7fafc !important;
			border: 0 !important;
		}
	}

	.title {
		font-weight: bold;
		color: #555;
	}

	.closeBox {
		background: #f7fbff;
		border-radius: 32rpx;
		color: #176BEB;
		font-size: 26rpx;
		padding: 6rpx 12rpx;
	}


	.btnBox {
		position: fixed;
		bottom: 0;
		left: 30rpx;
		right: 30rpx;
		display: flex;
		justify-content: space-between;

		.btn {
			width: 45vw;
			background: #f5f7fa;
			border-radius: 20rpx;
			text-align: center;
			height: 100rpx;
			line-height: 100rpx;
			color: #fff;
		}

		.btn1 {
			background-color: #6a8bff;
		}

		.btn2 {
			background-color: #5ac725;
		}

	}
</style>